

<template>
  <div class="render-item"   @click.stop="activeItem">
    <el-form-item v-if="currentItem.type === 'form'" :label="currentItem.label" >
      <component :is="renderComponent"
                 v-bind="componentProps"
                 :currentItem="currentItem"
                 ></component>
    </el-form-item>
    <component v-else
               :is="renderComponent"
               v-bind="componentProps"
               :currentItem="currentItem"
    ></component>

    <span class="drawing-item-copy" title="复制" @click.stop="copyItem">
        <i class="el-icon-copy-document" />
    </span>
    <span class="drawing-item-delete" title="删除" @click.stop="deleteItem">
    <i class="el-icon-delete" />
    </span>
  </div>
</template>
<script>
import RenderTabs from "../RenderComponents/render-tabs.vue";
import RenderLayout from "../RenderComponents/render-layout.vue";
import RenderSelect from "../RenderComponents/render-select.vue";
import RenderRadio from "../RenderComponents/render-radio.vue";
import RenderCheckbox from "../RenderComponents/render-checkbox.vue";
import RenderCascader from "../RenderComponents/render-cascader.vue";
import RenderSwitch from "../RenderComponents/render-switch.vue";
import RenderSlider from "../RenderComponents/render-slider.vue";
import RenderDatePicker from "../RenderComponents/render-datepicker.vue";
import RenderTreeSelect from "../RenderComponents/render-treeselect.vue";
import RenderImageUpload from "../RenderComponents/render-image-upload.vue";
import RenderFileUpload from "../RenderComponents/render-file-upload.vue";
const componentMap = {
  "input":"el-input",
  "textarea":"el-input",
  "input-number":"el-input-number",
  "select":"render-select",
  "radio":"render-radio",
  "checkbox":"render-checkbox",
  "cascader":"render-cascader",
  "switch":"render-switch",
  "slider":"render-slider",
  "datepicker":"render-datepicker",
  "tree-select":"render-tree-select",
  "image-upload":"render-image-upload",
  "file-upload":"render-file-upload",
  "tabs":"render-tabs",
  "layout":"render-layout",
}
export default {
  name: "render-item",
  components:{
    "render-tabs":RenderTabs,
    "render-layout":RenderLayout,
    "render-select":RenderSelect,
    "render-radio":RenderRadio,
    "render-checkbox":RenderCheckbox,
    "render-cascader":RenderCascader,
    "render-switch":RenderSwitch,
    "render-slider":RenderSlider,
    "render-datepicker":RenderDatePicker,
    "render-tree-select":RenderTreeSelect,
    "render-image-upload":RenderImageUpload,
    "render-file-upload":RenderFileUpload,
  },
  props: {
    currentItem: {
      type: Object
    },
    index:{
      type:Number
    }
  },
  methods:{
    activeItem(){
      this.$store.dispatch("formGen/SET_COMPONENT",this.currentItem)
    },
    copyItem(){
      this.$emit('copyItem',this.currentItem)

    },
    deleteItem(){
      this.$emit('deleteItem',this.index)
    },
  },
  computed:{
    /**
     * 寻找对应的组件
     * @returns {*}
     */
    renderComponent(){
      return componentMap[this.currentItem.render]
    },
    /**
     * 组件的配置信息
     */
    componentProps(){
      const componentMap = {

      }
      Object.keys(this.currentItem.props).forEach(key=>{
        componentMap[key] = this.currentItem.props[key].value
      })

      return componentMap;
    }
  }
}
</script>
<style scoped lang="scss">
.render-item{
  position: relative;
  background: #f6f7ff;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 6px;
}
.drawing-item-copy{
  position: absolute;
  top: -10px;
  right: 56px;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 50%;
  font-size: 12px;
  border: 1px solid #409EFF;
  cursor: pointer;
  z-index: 1;
  background: #fff;
  &:hover{
    background: #409EFF;
    color: #fff;
  }
}
.drawing-item-delete{
  position: absolute;
  top: -10px;
  right: 24px;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 50%;
  font-size: 12px;
  border: 1px solid  #F56C6C;
  cursor: pointer;
  z-index: 1;
  background: #fff;
  &:hover{
    background:  #F56C6C;
    color: #fff;
  }
}
</style>
